<template>
	<view class="box">
		<Title name="项目详情"></Title>
		<view class="show">
			<image :src="info.background" mode=""></image>
		</view>
		
		<view class="cover">
			<view class="top">{{info.title}}</view>
			<view class="bottom">
				<view class="goal">
					<text class="value">{{info.goal_num}}</text><br>
					<text class="key">活动目标人数</text>
				</view>
				<view class="progress">
					<text class="value">{{info.new_num}}</text><br>
					<text class="key">参与人数</text>
				</view>
			</view>
			<view class="probar">
				<view class="strip_grey">
					<view class="strip_orange"></view>
				</view>
			</view>
		</view>
	
		<view class="container">
			<view class="builder">
				<image src="../../static/img/shetuan_s.png" mode=""></image>
				<text>由大学生志愿社发起</text>
			</view>
			
			<view class="title">
				<view class="bar"></view>
				<text>项目详情</text>
			</view>
			
			<view class="content">
				<text>2019年11月10日，河北软件职业技术学院青年益工社成员为老人们送去慰问品，提供修剪头发、洗头发、剪指甲、打扫卫生等志愿服务活动。在此之前，我们做了大量的准备工作。包括利用课余时间排练歌舞表演，集体购买慰问品，以及向负责人员询问地点、安排访问时间等等。</text>
				<br>
				<image src="../../static/img/aaa.jpg" mode=""></image>
			</view>
			
			<view class="title">
				<view class="bar"></view>
				<text>项目目的</text>
			</view>
			
			<view class="content">
				<text>2019年11月10日，河北软件职业技术学院青年益工社成员为老人们送去慰问品，提供修剪头发、洗头发、剪指甲、打扫卫生等志愿服务活动。在此之前，我们做了大量的准备工作。包括利用课余时间排练歌舞表演，集体购买慰问品，以及向负责人员询问地点、安排访问时间等等。</text>
				<br>
				<image src="../../static/img/IMG_4547(20191229-155452).JPG" mode=""></image>
			</view>
			
			<view class="title">
				<view class="bar"></view>
				<text>项目进展</text>
			</view>
			
			<view class="content">
				<view class="begain">
					<view class="t"></view>
					<text>项目发布</text>
				</view>
				<view class="item">
					<view class="tab"></view>
					<text class="iden">2019年11月5日由大学生志愿社发布</text>
				</view>
				<view class="item">
					<view class="tab"></view>
					<text class="iden">2019年11月5日由大学生志愿社发布</text>
				</view>
				<view class="item">
					<view class="tab"></view>
					<text class="iden">2019年11月5日由大学生志愿社发布</text>
				</view>
			</view>
		</view>
	
		<view class="deline"></view>
		<view class="comments">
			<view class="title">留言 5</view>
			<view class="item-list">
				<view class="items">
					<view class="top">
						<view class="left">
							<image src="../../static/logo.png" mode=""></image>
							<text class="name">小青椒</text>
						</view>
						<text class="time">刚刚</text>
					</view>
					<text class="bottom">说得非常对我赞成！</text>
				</view>
		
				<view class="items">
					<view class="top">
						<view class="left">
							<image src="../../static/logo.png" mode=""></image>
							<text class="name">小青椒</text>
						</view>
						<text class="time">刚刚</text>
					</view>
					<text class="bottom">说得非常对我赞成！</text>
				</view>
			</view>
		</view>
	
		<view class="join" @click="joinItem" v-if="show">加入</view>
		<view style="height: 1px;"></view>
	</view>
	
</template>

<script>
	import Title from "../components/title.vue"
	export default {
		components: {
			Title
		},
		data () {
			return {
				info: {},
				ops: {},
				show: true
			}
		},
		methods: {
			async joinItem () {
				let res = await uni.request({
					url: this.$config.basisIP,
					method: "POST",
					data: {
						fun: "attention_project",
						projectId: this.ops.pro_id,
						username: uni.getStorageSync("userInfo").username
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					}
				})
				
				res = res[1].data
				
				uni.showToast({
					title: res.result
				})
				
				if (res.msg === "ok") {
					this.show = false
				}
				
			}
		},
		async onLoad (options) {
			this.ops = options
			let res = await uni.request({
				url: this.$config.basisIP,
				method: "POST",
				data: {
					fun: "action",
					project_id: options.pro_id,
				},
				header: {
					"content-type": "application/x-www-form-urlencoded"
				}
			})
			
			res = res[1].data
			
			if (res.code === 200) {
				this.info = res.result
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		background-color: #fff;
		
		.show {
			height: 317rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
	
		.cover {
			width: 645rpx;
			height: 248rpx;
			border-radius: 5px;
			text-align: center;
			box-shadow: 5px 5px 30px 0px rgba(237, 241, 242, 1);
			margin-top: -35rpx;
			position: absolute;
			background-color: #fff;
			left: 50%;
			transform: translateX(-50%);
			padding: 24rpx;
			
			.top {
				text-align: center;
				font-weight: bold;
				font-size: 29rpx;
			}
			
			.bottom {
				margin-top: 29rpx;
				display: flex;
				
				.goal {
					flex: 1;
					display: flex;
					flex-direction: column;
								
					.value {
						font-size: 54rpx;
						color: #FF6200;
					}
					
					.key {
						margin-top: -30rpx;
						font-size: 25rpx;
						color: $subColor;
						
						// #ifdef APP-PLUS
						margin-top: 30rpx;
						// #endif
					}
				}
				
				
				.progress {
					flex: 1;
					display: flex;
					flex-direction: column;
					
					.value {
						font-size: 54rpx;
						color: #FF6200;
					}
					
					.key {
						margin-top: -30rpx;
						font-size: 25rpx;
						color: $subColor;
						
						// #ifdef APP-PLUS
						margin-top: 30rpx;
						// #endif
					}
				}
			}
			
			.probar {
				height: 80rpx;
				/* 进度条灰色 */
				.strip_grey{
				    width: 478rpx;    /* 308 */
				    height: 18rpx;
				    background-color:#EAEAEA;
				    border-radius: 18rpx;
					position: relative;
					margin: 30rpx auto 0;
				    /* 18 */
				}
				/* 进度条橙色 */
				.strip_orange{
				    width: 236rpx;  /* 243 */
				    height: 18rpx;
				    background-color:#FF6200;
				    border-radius: 18rpx;
				    /* 18 */
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}
	
		.container {
			margin-top: 250rpx;
			padding: 25rpx;
			.builder {
				display: flex;
				align-items: center;
				
				image {
					width: 54rpx;
					height: 54rpx;
				}
				
				text {
					margin-left: 18rpx;
					font-size: 25rpx;
					color: $subColor;
				}
			}
			
			.title {
				display: flex;
				align-items: center;
				margin: 10rpx 0;
				
				.bar {
					width: 2px;
					height: 60rpx;
					background-color: $yellow;
				}
				
				text {
					font-size: 32rpx;
					font-weight: bold;
					margin-left: 30rpx;
				}
			}
			
			.content {
				font-size: 29rpx;
				color: $subColor;
				
				image {
					margin-top: 10rpx;
					width: 478rpx;
					height: 282rpx;
				}
				
				.begain {
					margin: 10rpx -15rpx;
					display: flex;
					align-items: center;
					
					.t {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						background: #FF6200;
					}
					
					text {
						margin-left: 15rpx;
						font-size: 15px;
						color: #333;
					}
				}
				
				.item {
					display: flex;
					align-items: center;
					padding: 0;
					
					.tab {
						width: 2px;
						height: 60rpx;
						background-color: #FF6200;
					}
					
					.iden {
						font-size: 25rpx;
						color: #101010;
						margin-left: 30rpx;
					}
				}
				
			}
		}
	
		.deline {
			height: 18rpx;
			background: #EAEAEA;
			width: 100%;
			position: absolute;
			left: 0;
		}
		
		.comments {
			margin: 30rpx 0;
			.title {
				padding: 0 20rpx;
				font-size: $middleFont;
				font-weight: bold;
				background-color: #fff;
				line-height: 2;
				margin-bottom: $smallMargin;
				border-bottom: 1px solid #EDEDED;
			}
		
			.item-list {
		
				.items {
					padding: 10px 20rpx;
					font-size: $smallFont;
					background-color: #fff;
					margin-bottom: 9rpx;
					border-bottom: 1px solid #EDEDED;
		
					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
		
						.left {
							display: flex;
							align-items: center;
		
							&>image {
								width: 90rpx;
								height: 90rpx;
								border-radius: 50%;
								margin-right: 18rpx;
							}
						}
		
						.time {
							color: $subColor;
						}
					}
		
					.bottom {
						margin-left: 108rpx;
					}
				}
			}
		}
	
		.join {
			width: 285rpx;
			height: 110rpx;
			border-radius: 91rpx;
			font-size: 32rpx;
			line-height: 110rpx;
			text-align: center;
			border: 2px solid $yellow;
			font-weight: bold;
			margin: 30rpx auto;
		}
	}
</style>
